<template>
  <view class="login-container">
    <view class="login-header">
      <text class="title">用户登录</text>
    </view>

    <view class="login-tabs">
      <view 
        :class="['tab-item', activeTab === 'password' ? 'active' : '']"
        @click="activeTab = 'password'"
      >
        密码登录
      </view>
      <view 
        :class="['tab-item', activeTab === 'code' ? 'active' : '']"
        @click="activeTab = 'code'"
      >
        验证码登录
      </view>
    </view>

    <view class="login-form">
      <!-- 密码登录表单 -->
      <view v-if="activeTab === 'password'" class="form-item">
        <input 
          v-model="form.username" 
          placeholder="请输入用户名/手机号" 
          class="input"
        />
      </view>
      <view v-if="activeTab === 'password'" class="form-item">
        <input 
          v-model="form.password" 
          placeholder="请输入密码" 
          type="password"
          class="input"
        />
      </view>

      <!-- 验证码登录表单 -->
      <view v-if="activeTab === 'code'" class="form-item">
        <input 
          v-model="form.phone" 
          placeholder="请输入手机号" 
          class="input"
        />
      </view>
      <view v-if="activeTab === 'code'" class="form-item code-item">
        <input 
          v-model="form.code" 
          placeholder="请输入验证码" 
          class="input"
        />
        <button 
          class="code-btn" 
          :disabled="countdown > 0"
          @click="sendCode"
        >
          {{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
        </button>
      </view>

      <button class="submit-btn" @click="handleSubmit">登录</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '@/stores/userdata'

const activeTab = ref<'password' | 'code'>('password')
const countdown = ref(0)
const form = ref({
  username: '',
  password: '',
  phone: '',
  code: ''
})

const sendCode = () => {
  // 验证手机号
  if (!form.value.phone) {
    uni.showToast({ title: '请输入手机号', icon: 'none' })
    return
  }
  
  // 发送验证码逻辑
  countdown.value = 60
  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)
  
  // 这里调用发送验证码API
  console.log('发送验证码到:', form.value.phone)
}

const handleSubmit = async () => {
  const userStore = useUserStore()
  
  if (activeTab.value === 'password') {
    if (!form.value.username || !form.value.password) {
      uni.showToast({ title: '请输入用户名和密码', icon: 'none' })
      return
    }
    
    // 调用密码登录API
    try {
      await userStore.loginByPassword({
        username: form.value.username,
        password: form.value.password
      })
      uni.showToast({ title: '登录成功' })
      // 登录成功后的跳转逻辑
    } catch (error) {
      uni.showToast({ title: '登录失败', icon: 'none' })
    }
  } else {
    if (!form.value.phone || !form.value.code) {
      uni.showToast({ title: '请输入手机号和验证码', icon: 'none' })
      return
    }
    
    // 调用验证码登录API
    try {
      await userStore.loginByCode({
        phone: form.value.phone,
        code: form.value.code
      })
      uni.showToast({ title: '登录成功' })
      // 登录成功后的跳转逻辑
    } catch (error) {
      uni.showToast({ title: '登录失败', icon: 'none' })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  padding: 40rpx;
  
  .login-header {
    margin-bottom: 80rpx;
    
    .title {
      font-size: 48rpx;
      font-weight: bold;
    }
  }
  
  .login-tabs {
    display: flex;
    margin-bottom: 60rpx;
    border-bottom: 1px solid #eee;
    
    .tab-item {
      padding: 20rpx 40rpx;
      color: #666;
      
      &.active {
        color: #007aff;
        border-bottom: 4rpx solid #007aff;
      }
    }
  }
  
  .login-form {
    .form-item {
      margin-bottom: 40rpx;
      
      .input {
        height: 100rpx;
        border: 1px solid #eee;
        border-radius: 8rpx;
        padding: 0 20rpx;
      }
    }
    
    .code-item {
      display: flex;
      align-items: center;
      
      .input {
        flex: 1;
        margin-right: 20rpx;
      }
      
      .code-btn {
        width: 200rpx;
        height: 100rpx;
        line-height: 100rpx;
        background: #f8f8f8;
        color: #007aff;
        border: none;
        border-radius: 8rpx;
        
        &[disabled] {
          color: #999;
        }
      }
    }
    
    .submit-btn {
      margin-top: 60rpx;
      height: 100rpx;
      line-height: 100rpx;
      background: #007aff;
      color: #fff;
      border-radius: 8rpx;
    }
  }
}
</style>
